<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="6">{{ $t('channel name') }}</el-col>
            <el-col :md="2" :sm="4">PID</el-col>
            <el-col :md="2" :sm="4">TTL</el-col>
            <el-col :md="2" :sm="4">{{ $t('Flow Control') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('Bandwidth') }}</el-col>
            <el-col :md="2" :sm="4">PMT PID</el-col>
            <el-col :md="2" :sm="4">ServiceID</el-col>
            <el-col :md="2" :sm="4">StreamID</el-col>
            <el-col :md="2" :sm="4">NetworkID</el-col>
            <el-col :md="2" :sm="4">PacketSize</el-col>
            <el-col :md="2" :sm="4">RTP Head</el-col>
            
        </el-row>
        <div v-for="(data, index) in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px">
                <el-col :md="3" :sm="6">
                    <el-input v-model="data.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.ts.mpegts_start_pid" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.stream.udp.ttl" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.stream.udp.flowCtrl" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.stream.udp.bandwidth" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.ts.mpegts_pmt_start_pid" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.ts.mpegts_service_id" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.ts.mpegts_transport_stream_id" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.ts.mpegts_original_network_id" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-select v-model="data.ts.tsSize" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option label="188" :value="188"></el-option>
                        <el-option label="376" :value="376"></el-option>
                        <el-option label="564" :value="564"></el-option>
                        <el-option label="752" :value="752"></el-option>
                        <el-option label="940" :value="940"></el-option>
                        <el-option label="1128" :value="1128"></el-option>
                        <el-option label="1316" :value="1316"></el-option>
                        <el-option label="1504" :value="1504"></el-option>
                        <el-option label="1692" :value="1692"></el-option>
                        <el-option label="1880" :value="1880"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.stream.udp.rtp" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data'])
let dataList = ref([])
watchEffect(() => {

    dataList.value = props.data
})

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  